<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="mobileOptimized" content="240" />
<meta name="format-detection" content="telephone=no" />
<link href="../css/bootstrap.css" rel="stylesheet">
<title>Insert title here</title>
</head>
<body>

<div id="eventFlow1" style="margin: 20px;border: 1px solid #ddd;">
	<div id="eventFlow2" style="margin: 20px;border: 1px solid #ddd;">
		<div id="eventFlow3" style="margin: 20px;border: 1px solid #ddd;">
			<button class="btn" id="btn1" style="margin: 20px;border: 1px solid #ddd;">点击我</button>
		</div>
	</div>
</div>



<script type="text/javascript">
	function $(str){
		return document.getElementById(str);
	}
	
	var warp1 = $("eventFlow1");
	var warp2 = $("eventFlow2");
	var warp3 = $("eventFlow3");
	var btn1 = $("btn1"); 
	
	warp1.addEventListener("click",function(e){
		console.log("eventFlow1");
	},false);
	
	warp2.addEventListener("click",function(e){
		console.log("eventFlow2");
	},false);
	
	warp3.addEventListener("click",function(e){
		console.log("eventFlow3");
		sendEvent("fadin",warp2,{wang:"hehe",kun:"hahahha"});
	},false);
	
	warp2.addEventListener("fadin",function(e){
		console.log("eventFlow2-fadin"+e.kun);
		e.stopPropagation();
	},false);
	warp1.addEventListener("fadin",function(e){
		console.log("eventFlow1-fadin"+e.kun);
	},false);
	
	
	function sendEvent(type, node, props)
	{
	    if (node)
	    {
	        var event = document.createEvent("UIEvent");
	        event.initEvent(type, true, false);  // no bubble, no cancel
	        if (props)
	        {
	            for (i in props)
	            {
	                event[i] = props[i];
	            }
	        }
	        node.dispatchEvent(event);
	    }
	}
	
</script>


</body>
</html>